<template>
    <div class="news">
        <Navbar title="新闻列表"></Navbar>
        <div class="newsList">
            <!-- 实现新闻列表  无序列表 -->
            <ul>
                <li v-for="item in newlist" :key="item.id">
                    <!-- 点击整条新闻区域 -->
                    <router-link :to="{name:'newsDetail',query:{id:item.id}}">
                        <!-- 新闻左侧图片区域 -->
                        <div class="new_img">
                            <!-- <img src="static/img/000.jpg"> -->
                        <img :src="item.img">
                        </div>
                        <!-- 新闻右侧内容区域 -->
                        <div class="content">
                            <!-- 标题头 -->
                            <p class="title">{{item.title}}</p>
                            <!-- 新闻内容 -->
                            <div class="news-desc">
                                <!-- 内容 -->
                                <p class="summary">{{item.content | newcontent}}</p>
                                <p>
                                    <span class="praise">观看次数:{{item.watchNum}}</span>
                                    <span class="time">发表时间:{{item.gmtCreate}}</span>
                                </p>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default{
        name:"NewList",
        data(){
            return{
                newlist:[]
            }
        },
        created(){
            this.$axios.get("/articleList").then(res=>{
                console.log(res.data.data)
                this.newlist = res.data.data
            }).catch(err=>{
                console.log(err)
            })
        },
        filters:{
            newcontent(e){
                if(e!=null){
                    return ""
                }
                if(e.length>15){
                    return e.substring(0,15)+"..."
                }
                return e
            }
        }
    }
</script>
<style>
    *{
        margin:0px;
        padding:0px;
        list-style: none;
    }
    .news{
        margin-top: 40px;
    }
    .newsList ul li {
        position: relative;
        margin-left: 20px;
       
    }

    .newsList ul li a{
        display: block;
        width: 100%;
        height: 150px;
        color: #808080;
        display: flex;
        text-decoration: none;
        border-bottom: 1px solid gainsboro;
    }

    .new_img{
        width: 30%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .newsList ul li a img{
        margin-top: 20px;
        width: 100px;
        height: 80px;
    }

    .content .title{
        font-size: 15px;
        display: inline-block;
        color: #131f3c;
        letter-spacing: 0;
        padding-bottom: 7px;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 20px;
    }

    .news-desc span{
        color: #ff6700
    }

    .summary{
        padding: 5px 0;
        /* overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; */
    }

    .time {
        margin-left: 30px;
    }

</style>
